<template>
	<view class="container">
		<!-- <view class="top-swiper-box">
			<uv-swiper height="250" :list="swiper_list_1" keyName="src" imgMode="scaleToFill" indicator circular
				interval="4000" @click="onClickSwiper"></uv-swiper>
		</view> -->
		<!-- <view class="">test</view> -->
		<view class="page-content">
			<view class="wjf-section">
				<view class="sevtion-left">
					<view class="border-line"></view>
					<view class="title-box">
						<text class="title-text">{{$w('展会活动')}}</text>
					</view>
				</view>
			</view>
			<!-- <uni-section class="mb-10" title="展会活动" titleFontSize="32rpx">
			<template v-slot:decoration>
				<view class="decoration"></view>
			</template>
		</uni-section> -->
			<unicloud-db ref="udb" collection="tian-events" field="evnet_ID,title,theme,event_thumb" :page-size="10"
				@load="onDataLoad" v-slot:default="{data, pagination, loading, hasMore, error, options}">
				<view class="event-box">
					<uv-list>
						<template v-for="(item,index) in data" :key="item._id">
							<uv-list-item clickable show-arrow @click="onClickEvent(item._id)">
								<template v-slot:default>
									<view class="even-item-box">
										<view class="image-box" v-if="item.event_thumb">
											<image :src="item.event_thumb" mode="aspectFit"></image>
										</view>
										<view class="center-box">
											<view class="title-box">
												<text>{{item.title[locaLang]}}</text>
											</view>
											<view class="theme-box">
												<text class="theme-text">{{item.theme[locaLang]}}</text>
											</view>
										</view>
									</view>
								</template>
							</uv-list-item>

						</template>
					</uv-list>
				</view>

			</unicloud-db>
			<!-- <view class="">
			<button type="default" @click="test">test</button>
		</view> -->
			<!-- <view class="">
			<button type="default" @click="testGet">test get</button>
		</view> -->
		</view>
		<view class="">
			<ap126-footer></ap126-footer>
		</view>
	</view>

</template>

<script>
	const db = uniCloud.database()
	const dbJQL = uniCloud.databaseForJQL()
	import message from './i18n/index.js'
	const $w = (key) => {
		return message[uni.getLocale()][key]
	}
	export default {
		data() {
			return {
				swiper_list_1: [],
				eventsData: [],

			}
		},
		computed: {
			userInfo() {
				return this.$store.state.user.userInfo
			},
			locaLang() {
				return uni.getLocale()
			},
			$w() {
				return $w
			}
		},
		onLoad() {},
		onShow() {
			this.getSwiperImgs()
		},
		mounted() {
			this.adjustRootFontSize();
			uni.onWindowResize(this.adjustRootFontSize)
		},
		beforeDestroy() {
			uni.offWindowResize(this.adjustRootFontSize)
		},
		methods: {
			test() {
				console.log(this.userInfo);
				db.collection('uni-id-users').doc(this.userInfo._id).update({
					status: 0
				})
			},
			testGet() {
				db.collection('uni_id-tags').get().then(res => {
					console.log(res);
				})
			},
			onClickEvent(id) {
				console.log(id);
				uni.navigateTo({
					url: '/pages/expo-forum/event-detail?id=' + id,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			onDataLoad(e) {
				console.log(e);
			},
			async getSwiperImgs() {
				let where = `name == 'expo_forum_page_1'`
				let {
					result
				} = await db.collection('tian-banner-category').where(where).field('name,images').get();
				this.swiper_list_1 = result.data.filter(item => item.name == 'expo_forum_page_1')[0].images
				// this.swiper_list_2 = result.data.filter(item => item.name == 'home_page_2')[0].images
			},
			onClickSwiper() {

			},
			adjustRootFontSize() {
				const screenWidth = uni.getWindowInfo().screenWidth; // 获取当前屏幕的宽度
				let rootFontSize = 16; // 默认根字体大小

				// 根据屏幕宽度调整根字体大小
				if (screenWidth >= 768) { // PC端
					rootFontSize = 16; // 设置较小的基准字体大小
				} else { // 手机端
					rootFontSize = 20; // 设置手机端的基准字体大小
				}

				document.documentElement.style.fontSize = `${rootFontSize}px`; // 动态设置根字体大小
			}
		}
	}
</script>

<style lang="scss">
	$uni-success: #18bc37 !default;

	.container {
		max-width: 800px;
		height: 100vh;
		/* 设置最大宽度 */
		margin: 0 auto;
		/* 居中显示 */
		// padding: 20px;
		/* 添加内边距（可选） */
		background-color: #eee;
	}

	.page-content {
		min-height: 70vh;
	}

	.top-swiper-box {
		width: 100%;
		border-bottom-left-radius: 50px;
		border-bottom-right-radius: 50px;
		overflow: hidden;
		/* 使圆角效果生效 */
	}

	.uni-wrap {
		flex-direction: column;
		/* #ifdef H5 */
		height: calc(100vh - 44px);
		/* #endif */
		/* #ifndef H5 */
		height: 100vh;
		/* #endif */
		flex: 1;
	}

	.mb-10 {
		margin-bottom: 10px;
	}

	/* 仿组件竖线 */
	.decoration {
		width: 8rpx;
		height: 24rpx;
		margin-right: 10rpx;
		border-radius: 10px;
		background-color: #f40000;
	}

	// 活动部分样式
	.event-box {
		padding: 0 20rpx;
		// border-radius: 10rpx;

		// width: 100%;
		// background-color: greenyellow;
		.even-item-box {
			display: flex;
			align-items: center;
			padding: 20rpx 20rpx 30rpx 20rpx;
			border-bottom: 1px solid #ccc;
			// border-radius: 10rpx;

			.image-box {
				width: 180rpx;
				height: 180rpx;
				border-radius: 10rpx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 10rpx;
				}
			}

			.center-box {
				flex: 1;
				margin-left: 16rpx;
				border-radius: 10rpx;

				.title-box {
					text {
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2; //此处是一数字
						-webkit-box-orient: vertical;
						line-height: 1.05;
						color: #333;
						font-size: 30rpx;
						font-weight: 550;
						line-height: 1.1;
					}
				}

				.theme-box {
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2; //此处是一数字
					-webkit-box-orient: vertical;
					line-height: 1.05;

					.theme-text {
						color: #555;
						font-size: 26rpx;
						line-height: 1.05;
					}
				}
			}
		}
	}



	.wjf-section {
		padding: 30px 20px 20px 20px;
		display: flex;
		// background-color: greenyellow;

		.sevtion-left {
			display: flex;
			align-items: center;

			.border-line {
				width: 3px;
				height: 16px;
				background-color: dodgerblue;
				margin-right: 5px;
			}

			.title-box {
				color: #333;
				font-size: 15px;
				font-weight: 550;
			}
		}
	}
</style>